<template>
	<div>
		<my-form :model="formData" :formItem="formItem" label-width="90px" ref="formRef">
			<template #executionListener>
				<el-badge :value="executionListenerLength">
					<el-button @click="dialogExecutionListener = true">编辑</el-button>
				</el-badge>
			</template>
		</my-form>
		<executionListenerDialog v-model="dialogExecutionListener" :element="element" :modeler="modeler" @close="finishExecutionListener" />
	</div>
</template>

<script setup>
import executionListenerDialog from './property/executionListener';
import hooksPanel, { PanelProps } from '../common/Panel';
import { commonParse } from '../common/parseElement';

let formRef = ref(null);

const props = defineProps({
		...PanelProps
	}),
	formItem = [
		{
			prop: 'id',
			label: '节点 id',
			required: true
		},
		{
			prop: 'name',
			label: '节点名称'
		},
		{
			prop: 'documentation',
			label: '节点描述'
		},
		{
			prop: 'executionListener',
			label: '执行监听器'
		}
	];

const { formData, dialogExecutionListener, executionListenerLength, finishExecutionListener, computedExecutionListenerLength } = hooksPanel(props);

formData.value = commonParse(props.element);
computedExecutionListenerLength();

defineExpose({
	childValidate: async () => {
		return await formRef.value?.$refs?.refMyForm?.validate();
	}
});
</script>
